<template>
<div class="swiper">
    <transition-group tag='ul' name='image' class="ul-item-swiper">
      <li class="li-item-swiper" v-for='(image,index) in img' :key='index' v-show='index===mark'>
          <img :src="image">
      </li>
    </transition-group>
    <router-link to="/">
      <img class="shouye" src="~@/assets/images/swiper/shouye.png">
    </router-link>
    <router-link :to="{name: backname, query: {data: 'a', compoent: compoent, compoentchild: compoentchild}}">
      <img class="fanhui" src="~@/assets/images/swiper/fanhui.png">
    </router-link>
    <img class="shangyiye" @click="dec" src="~@/assets/images/swiper/shangyiye.png">
    <img class="xiayiye" @click="add" src="~@/assets/images/swiper/xiayiye.png">
</div>
</template>

<script>
  export default {
    name: 'swiper',
    data () {
      return {
        mark: 0,
        timer: null,
        backname: '',
        compoent: '',
        compoentchild: '',
        img: []
      }
    },
    created () {
      let that = this
      document.onkeydown = function () {
        let key = window.event.keyCode
        if (key === 37 || key === 38) {
          that.dec()
        } else if (key === 39 || key === 40) {
          that.add()
        }
      }
      document.addEventListener('mousewheel', function (e) {
        let direction = e.deltaY > 0 ? 'down' : 'up'
        if (direction === 'down') {
          that.add()
        } else if (direction === 'up') {
          that.dec()
        }
      })
      console.log('route...')
      that.backname = that.$route.query.name
      that.compoent = that.$route.query.compoent
      that.img = that.$route.query.data
      if (that.$route.query.compoentchild !== undefined) {
        that.compoentchild = that.$route.query.compoentchild
        console.log(that.compoentchild)
      }
    },
    methods: {
      dec () {
        if (this.mark === 0) {
          this.mark = 0
        } else {
          this.mark--
        }
      },
      add () {
        console.log(this.img.length)
        if (this.mark !== this.img.length - 1) {
          this.mark++
        }
      }
    }
  }
</script>

<style>
.swiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 720px;
  background-color: #fff;
}
.ul-item-swiper {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.li-item-swiper {
  list-style: none;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
}
.shouye {
  position: absolute;
  top: 50px;
  left: 28px;
  width: 40px;
  height: 60px;
  z-index: 100;
}
.fanhui {
    position: absolute;
    top: 125px;
    left: 28px;
    width: 40px;
    height: 60px;
    z-index: 100;
}
.shangyiye {
  position: absolute;
  top: 50px;
  left: 1200px;
  width: 44px;
  height: 60px;
  z-index: 100;
}
.xiayiye {
  position: absolute;
  top: 125px;
  left: 1200px;
  width: 44px;
  height: 60px;
  z-index: 100;
}
</style>
